<template>
	<image :src="src" lazy-load :class="imageClass" @load="loadImage"
	:style="imageStyle" @click="$emit('click')" class="bg-hover-light"></image>
</template>

<script>
	export default{
		props:{
			src: {
				type: String,
				default: ''
			},
			imageClass:{
				type: String,
				default: ""
			},
			maxWidth:{
				type: Number,
				default: 500 //rpx
			},
			maxHeight:{
				type: Number,
				default: 350 //rpx
			}
		},
		data(){
			return{
				w:100,
				h:100	
			}
		},
		methods:{
			// 加载图片 动态获取宽高
			loadImage(e){
				let w = e.detail.width
				let h = e.detail.height
				let maxW = uni.upx2px(this.maxWidth)
				let maxH = uni.upx2px(this.maxHeight)
				// 最大宽度
				// if(w <= maxW){
				// 	this.w = w
				// 	this.h = h
				// 	return;
				// }
				// this.w = maxW
				// this.h = maxW * (h/w)
				// 最大搞度
				if(h <= maxH){
					this.w = w <= maxW ? w : maxW
					this.h = h
					// 把图片宽高通知父组件
					this.$emit('load',{
						w:this.w,
						h:this.h
					})
					return;
				}
				this.h = maxH
				let w2 = maxH *(w/h)
				this.w = w2 <= maxW ? w2 : maxW
				// 把图片宽高通知父组件
				this.$emit('load',{
					w:this.w,
					h:this.h
				})
			},
		},
		computed:{
			imageStyle(){
				return `width:${this.w}px; height:${this.h}px;`
			}
		}
	}
</script>

<style>
</style>